<template>
  <div>
    <!-- 支持树类型的数据的显示。当 row 中包含 children 字段时，被视为树形数据。渲染树形数据时，必须要指定 row-key。 -->
    <el-table row-key="id" :data="menuList" border style="width: 100%">
      <el-table-column prop="firstcatename" label="一级分类" width="120"> </el-table-column>
      <el-table-column prop="secondcatename" label="二级分类" width="120">
      </el-table-column>
      <el-table-column prop="goodsname" label="商品名称"> </el-table-column>
      <el-table-column label="商品名称">
        <template slot-scope="item">
          <img :src="$host+item.row.img" width="100" alt="">
        </template>
      </el-table-column>
      <el-table-column label="是否热卖">
        <template slot-scope="item">
        <!-- active-value:激活时对应的值 -->
        <!-- inactive-value:激未活时对应的值 -->
        <!-- change:修改开关的值时触发的回调函数 -->
          <el-switch
            v-model="item.row.ishot"
            :active-value="1"
            :inactive-value="2"
            @change="changeHot(item.row)"
          >
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column label="是否新品">
        <template slot-scope="item">
          <el-switch
            v-model="item.row.isnew"
            :active-value="1"
            :inactive-value="2"
            @change="changeHot(item.row)"
          >
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column label="状态">
        <template slot-scope="item">
          <el-tag v-if="item.row.status == 1">正常</el-tag>
          <el-tag v-else>禁用</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="item">
          <div>
            <el-button type="info" size="mini" @click="edit(item.row)"
              >编辑</el-button
            >
            <el-button type="danger" size="mini" @click="delItem(item.row.id)"
              >删除</el-button
            >
          </div>
        </template>
      </el-table-column>
    </el-table>
    <!--分页的逻辑，几个关键变量：数据的总条数total，每页显示几条size，分成多少页pages，当前页面currentPage -->
    <!-- 1.数据的总条数total，发请求，从后台获取。 -->
    <!-- 2.total/size，向上取整，得出pages，然后渲染分页 -->
    <!-- 3.根据currentPage和size，发请求获取本页的数据 -->
    <!-- -------------------------- -->
    <!-- size-change：每页显示几条被修改 -->
    <!-- current-change：修改当前页码，也就是跳转页码，看其他页码的数据 -->
    <!-- current-page：当前的页码数 -->
    <!-- page-sizes：每页显示数量的可选范围 -->
    <!-- page-size：每页显示几条 -->
    <!-- layout：要显示的控件 -->
    <!-- total：总条数 -->
    <el-pagination
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-size="pageSize"
      layout="total, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
  </div>
</template>

<script>
//引入封装好的接口
import { getGoodsCount, getGoodsList } from "../../util/request/api";
export default {
  data() {
    return {
      // 当前页码数
      currentPage: 1,
      // 每页显示几条
      pageSize: 5,
      // 总条数
      total: 1,
      menuList: [],
    };
  },
  methods: {
    //封装一个编辑事件
    edit(row) {
      // 子传父的第二个数据，row是整个菜单的数据
      this.$emit("edit", row);
    },
    // 获取管理员总数，用来计算分页
    getTotalNum() {
      //页面一加载就调用接口
      getGoodsCount().then((res) => {
        if (res.code == 200) {
          this.total = res.list[0].total;
          this.getUserList();
        }
      });
    },
    getUserList() {
      // 获取对应页码的数据,注意先后顺序
      getGoodsList({
        size: this.pageSize,
        page: this.currentPage,
      }).then((res) => {
        this.menuList = res.list;
      });
    },
    // 删除一项
    delItem(id) {
      this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          // 真的删除
          menuDel({ id: id }).then((res) => {
            if (res.code === 200) {
              // 后台返回的数据中包含最新数据，所以不用再发请求，直接用res
              this.menuList = res.list;
              this.$message({
                type: "success",
                message: "删除成功!",
              });
            } else {
              this.$message.error(res.msg);
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 修改当前页码
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getUserList();
    },
    changeSwitch(val) {
      // 这个val就是最新的完整的值
      console.log(val);
    }
  },
  mounted() {
    // 获取总条数
    this.getTotalNum();
  },
};
</script>

<style scoped></style>
